<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="org.example.service.*" %>
<%@ page import="org.example.model.Order" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.SimpleDateFormat" %>

<%
    // 检查用户是否登录
    Integer userId = (Integer) session.getAttribute("userId");
    if (userId == null) {
        response.sendRedirect("login.jsp");
        return;
    }
    
    // 获取用户订单列表
    List<Order> orders = new ArrayList<>();
    if (userId != null) {
        OrderService orderService = new OrderServiceImpl();
        orders = orderService.getOrdersByUserId(userId);
    }
    request.setAttribute("orders", orders);
%>

<!DOCTYPE html>
<html>
<head>
    <title>我的订单 - 淘乐乐商城</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 添加样式 */
        .order-list {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 15px;
        }
        
        .order-item {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
            margin-bottom: 15px;
        }
        
        .order-number {
            color: #666;
        }
        
        .order-status {
            color: #ff4d4f;
            font-weight: bold;
        }
        
        .order-products {
            margin: 15px 0;
        }
        
        .product-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            margin-right: 15px;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .product-price {
            color: #ff4d4f;
        }
        
        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid #eee;
        }
        
        .total-amount {
            font-size: 18px;
            color: #ff4d4f;
            font-weight: bold;
        }
        
        .order-actions button {
            padding: 8px 15px;
            margin-left: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .confirm-button {
            background: #ff4d4f;
            color: white;
        }
        
        .cancel-button {
            background: #f5f5f5;
            color: #666;
        }
    </style>
</head>
<body>
    <%@ include file="header.jsp" %>
    
    <div class="order-list">
        <h2>我的订单</h2>
        
        <c:forEach var="order" items="${orders}">
            <div class="order-item">
                <div class="order-header">
                    <span class="order-number">订单号：${order.orderNumber}</span>
                    <span class="order-status">${order.orderStatus}</span>
                </div>
                
                <div class="order-info">
                    <div>下单时间：${order.createTime}</div>
                    <c:if test="${not empty order.paymentTime}">
                        <div>支付时间：${order.paymentTime}</div>
                    </c:if>
                    <c:if test="${not empty order.shippingTime}">
                        <div>发货时间：${order.shippingTime}</div>
                    </c:if>
                    <c:if test="${not empty order.receiveTime}">
                        <div>收货时间：${order.receiveTime}</div>
                    </c:if>
                    <c:if test="${not empty order.cancelTime}">
                        <div>取消时间：${order.cancelTime}</div>
                    </c:if>
                </div>
                
                <div class="order-footer">
                    <div class="total-amount">
                        总金额：¥${order.totalAmount}
                    </div>
                    <div class="order-actions">
                        <c:if test="${order.orderStatus == '已发货'}">
                            <button class="confirm-button" onclick="confirmReceive('${order.orderNumber}')">确认收货</button>
                        </c:if>
                        <c:if test="${order.orderStatus == '待发货'}">
                            <button class="cancel-button" onclick="cancelOrder('${order.orderNumber}')">取消订单</button>
                        </c:if>
                    </div>
                </div>
            </div>
        </c:forEach>
    </div>
    
    <script>
        function confirmReceive(orderNumber) {
            if (confirm('确认已收到商品？')) {
                updateOrderStatus(orderNumber, '已完成');
            }
        }
        
        function cancelOrder(orderNumber) {
            if (confirm('确认要取消订单吗？')) {
                updateOrderStatus(orderNumber, '已取消');
            }
        }
        
        function updateOrderStatus(orderNumber, status) {
            fetch('order/status', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `orderNumber=${orderNumber}&status=${status}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('操作成功');
                    location.reload();
                } else {
                    alert(data.message || '操作失败');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('操作失败，请重试');
            });
        }
    </script>
    
    <%@ include file="footer.jsp" %>
</body>
</html> 